<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件冒泡</title>
		<style type="text/css">
			#box1 {
				width: 100px;
				height: 100px;
				background-color: red;
				position: absolute;
			}
			
			#box2{
				width: 500px;
				height: 500px;
				background-color: #99FF99;
			}
		</style>
		<script type="text/javascript">
			window.onload = function() {
				var box1 = document.getElementById("box1");
				document.onmousemove = function(event) {
					event = event || window.event;
					box1.style.left = (document.documentElement.scrollLeft + event.clientX) + "px";
					box1.style.top = (document.documentElement.scrollTop + event.clientY) + "px";
				};
				var box2 = document.getElementById("box2");
				box2.onmousemove = function(event){
					event = event || window.event;
					event.cancelBubble = true;
				};
			};
		</script>
	</head>
	<body style="height:1000px;width:2000px">
		<div id="box2"></div>
		<div id="box1"></div>
	</body>
</html>
